HarmonyOS Next 侧滑返回事件拦截案例

您所在的位置：网站首页 › 鸿蒙上滑 › HarmonyOS Next 侧滑返回事件拦截案例

HarmonyOS Next 侧滑返回事件拦截案例

2024-06-29 04:24:42| 来源: 网络整理| 查看: 265

介绍

在编辑场景中，存在用户误触返回，导致内容未保存就退出编辑页的现象; 本示例介绍使用NavDestination组件的onBackPressed回调对返回事件进行拦截，提示用户保存编辑内容，并使用preferences实例持久化保存内容。

效果预览图

使用说明

编辑状态侧滑返回弹出弹窗提醒用户是否保存。点击弹窗空白区域，弹窗消失，继续编辑。点击保存按钮，返回主页，保存用户编辑的数据，再次进入编辑页可在上次编辑的基础上再次编辑。实现思路

因为功能是以har的形式集成在主工程中，没有@Entry修饰的组件，也无法作为入口组件，不能使用@Entry组件的onBackPress生命周期函数。

在使用方面onBackPressed是NavDestination自己的事件，需配合NavDestination组件使用；且组件本身用于显示Navigation内容区，作为子页面的根容器，因此若拦截子页面的返回事件，可使用onBackPressed回调。

onBackPress生命周期函数只能在@Entry组件中使用，因此若对入口组件的返回事件拦截可使用onBackPress生命周期函数。

通过NavDestination组件的onBackPressed回调对返回事件进行拦截；源码参考MainPage.ets。

// 应用主页用NavDestination承载，用于显示Navigation的内容区 Navigation(this.pageStackForComponentSharedPages) { } .onAppear(() => { this.pageStackForComponentSharedPages.pushPathByName("MainPage", null, false); }) // 创建NavDestination组件，需使用此组件的onBackPressed回调拦截返回事件 .navDestination(this.textArea) @Builder textArea(name: string) { NavDestination() { Column() { TextArea({ text: this.text, placeholder: 'input your word...', controller: this.controller }) .onChange((value: string) => { this.text = value; }) } .justifyContent(FlexAlign.Start) .width('100%') .height('100%') } .onBackPressed(() => { // 此处可添加拦截处理逻辑，然后return true放行 return true } } 高性能知识点

不涉及

工程结构&模块类型 sideslipintercept // har类型 |---mainpage | |---Mainpage.ets // 视图层-组件页面模块依赖

本场景依赖了路由模块来注册路由。

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线